<m-card>
  <ng-container card-head>
    <div class="d-flex justify-content-between align-items-center w-100">
      <span class="g-card-title">软件状态</span>

      <div>
        <span class="text-muted">区域数：</span>
        {{ (tableRef?.result$ | async)?.total }}
      </div>
    </div>
  </ng-container>
  <m-api-data-table
    [dataSource]="softStatus$ | async"
    [center]="true"
    [selection]="statusSelection"
    #tableRef
  >
    <ng-container mDataTableColumn header="区域名称">
      <ng-template let-id="id" let-name="name">
        <td>
          <a [mDetailRouterLink]="{ id: id, name: name, type: 'zone' }">{{ name }}</a>
        </td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="软件更新">
      <ng-template let-status="status">
        <td>
          <m-update-status-text [status]="status"></m-update-status-text>
        </td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="操作">
      <ng-template let-id="id">
        <td>
          <button mat-icon-button [matMenuTriggerFor]="editMenu">
            <mat-icon>edit</mat-icon>
          </button>
          <mat-menu #editMenu>
            <button mat-menu-item (click)="tableRef.refresh(delete(id))">删除</button>
          </mat-menu>
        </td>
      </ng-template>
    </ng-container>
    <div>
      <button class="btn btn-sm btn-secondary mr-3" (click)="tableRef.selectAll()">全选</button>
      <button class="btn btn-sm btn-secondary" [matMenuTriggerFor]="batchMenu">批量操作</button>
      <mat-menu #batchMenu>
        <button mat-menu-item (click)="tableRef.refresh(delete())">删除</button>
      </mat-menu>
    </div>
  </m-api-data-table>
</m-card>
